<template>
  <view class="archive-dialog" v-if="visible" @click="handleClose">
    <view class="dialog-content" @click.stop>
      <!-- 头部 -->
      <view class="dialog-header">
        <text class="header-title">归档收文</text>
        <text class="close-btn" @click="handleClose">×</text>
      </view>

      <!-- 内容区域 -->
      <view class="dialog-body">
        <!-- 审批截止时间（禁用） -->
        <view class="form-section">
          <view class="section-title">
            <text>审批截止时间</text>
          </view>
          <view class="time-display disabled">
            <text class="time-icon">🕐</text>
            <text class="time-text">{{ approvalDeadline }}</text>
          </view>
          <view class="time-tips">
            <text>截止时间为当前时间，系统自动设置</text>
          </view>
        </view>

        <!-- 归档意见 -->
        <view class="form-section">
          <view class="section-title">
            <text>归档意见</text>
            <text class="required">*</text>
          </view>
          <textarea
            class="opinion-input"
            v-model="formData.opinion"
            placeholder="请输入归档意见"
            :maxlength="500"
          />
          <view class="char-count">{{ formData.opinion.length }}/500</view>
        </view>

        <!-- 归档说明 -->
        <view class="tips-section">
          <text class="tips-icon">💡</text>
          <view class="tips-content">
            <text class="tips-title">归档说明</text>
            <text class="tips-text">归档后该收文将标记为已完成，不再出现在待办列表中</text>
          </view>
        </view>
      </view>

      <!-- 底部操作按钮 -->
      <view class="dialog-footer">
        <view class="footer-btn cancel" @click="handleClose">
          <text>取消</text>
        </view>
        <view
          class="footer-btn confirm"
          :class="{ disabled: !canSubmit || submitLoading }"
          @click="handleSubmit"
        >
          <text>{{ submitLoading ? '归档中...' : '确认归档' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

// Props
const props = defineProps<{
  visible: boolean
  documentId: number | null
}>()

// Emits
const emit = defineEmits<{
  'update:visible': [value: boolean]
  confirm: [
    data: {
      approvalDeadline: string
      opinion: string
    },
  ]
  close: []
}>()

// 表单数据
const formData = ref({
  opinion: '',
})

// 提交加载状态
const submitLoading = ref(false)

// 审批截止时间（当前时间）
const approvalDeadline = computed(() => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
})

// 是否可以提交
const canSubmit = computed(() => {
  return formData.value.opinion.trim().length >= 2
})

// 监听visible变化，重置表单
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      formData.value.opinion = ''
    }
  },
)

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

// 提交归档
const handleSubmit = () => {
  if (!canSubmit.value) {
    uni.showToast({
      title: '请输入归档意见（至少2个字符）',
      icon: 'none',
    })
    return
  }

  emit('confirm', {
    approvalDeadline: approvalDeadline.value,
    opinion: formData.value.opinion.trim(),
  })
}
</script>

<style lang="scss" scoped>
.archive-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .dialog-content {
    background: white;
    border-radius: 16rpx;
    width: 90%;
    max-height: 80%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .dialog-header {
      padding: 32rpx;
      border-bottom: 1rpx solid #e5e7eb;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;

      .header-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #1a3582;
      }

      .close-btn {
        font-size: 48rpx;
        color: #9ca3af;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .dialog-body {
      flex: 1;
      overflow-y: auto;
      padding: 32rpx;

      .form-section {
        margin-bottom: 32rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .section-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #374151;
          margin-bottom: 16rpx;

          .required {
            color: #ef4444;
            margin-left: 4rpx;
          }
        }

        .time-display {
          padding: 20rpx 24rpx;
          background: #f9fafb;
          border-radius: 12rpx;
          border: 1rpx solid #e5e7eb;
          display: flex;
          align-items: center;
          gap: 16rpx;

          &.disabled {
            opacity: 0.7;
          }

          .time-icon {
            font-size: 32rpx;
            flex-shrink: 0;
          }

          .time-text {
            flex: 1;
            font-size: 28rpx;
            color: #374151;
            font-weight: 500;
          }
        }

        .time-tips {
          margin-top: 8rpx;
          padding-left: 8rpx;

          text {
            font-size: 22rpx;
            color: #9ca3af;
          }
        }

        .opinion-input {
          width: 100%;
          min-height: 200rpx;
          padding: 20rpx;
          border: 1rpx solid #e5e7eb;
          border-radius: 12rpx;
          font-size: 28rpx;
          color: #374151;
          background: #f9fafb;
          line-height: 1.6;
        }

        .char-count {
          font-size: 22rpx;
          color: #9ca3af;
          text-align: right;
          margin-top: 8rpx;
        }
      }

      .tips-section {
        padding: 20rpx 24rpx;
        background: #ecfdf5;
        border-radius: 12rpx;
        border: 1rpx solid #d1fae5;
        display: flex;
        align-items: flex-start;
        gap: 12rpx;

        .tips-icon {
          font-size: 32rpx;
          flex-shrink: 0;
        }

        .tips-content {
          flex: 1;

          .tips-title {
            display: block;
            font-size: 26rpx;
            color: #065f46;
            font-weight: 600;
            margin-bottom: 8rpx;
          }

          .tips-text {
            display: block;
            font-size: 24rpx;
            color: #047857;
            line-height: 1.5;
          }
        }
      }
    }

    .dialog-footer {
      padding: 24rpx 32rpx;
      border-top: 1rpx solid #e5e7eb;
      display: flex;
      gap: 24rpx;
      flex-shrink: 0;

      .footer-btn {
        flex: 1;
        height: 88rpx;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: 500;

        &.cancel {
          background: #f3f4f6;
          color: #6b7280;
          border: 1rpx solid #d1d5db;
        }

        &.confirm {
          background: #f59e0b;
          color: white;

          &.disabled {
            opacity: 0.5;
            background: #9ca3af;
          }
        }
      }
    }
  }
}
</style>
